<div class="default-background">
    <h2 class="flex-row-space-between">{{'MESSAGE_DASHBOARD'|translate}}
    </h2>
    <div>
        <div class="table-container">
            <table mat-table [dataSource]="tableSource.dataSource">
                <ng-container matColumnDef="date">
                    <th mat-header-cell *matHeaderCellDef> {{columnList['date']|translate}} </th>
                    <td mat-cell *matCellDef="let row">
                        {{row.date | date:'short'}}
                    </td>
                </ng-container>
                <ng-container matColumnDef="title">
                    <th mat-header-cell *matHeaderCellDef> {{columnList['title']|translate}} </th>
                    <td mat-cell *matCellDef="let row">
                        {{row.title|translate}}
                    </td>
                </ng-container>
                <ng-container matColumnDef="message">
                    <th mat-header-cell *matHeaderCellDef> {{columnList['message']|translate}} </th>
                    <td mat-cell *matCellDef="let row">
                        <ng-container *ngIf="row.title==='SYSTEM_VALIDATION_FAILED'">
                            {{row.descriptions[0]|translate}}
                            {{getValidationMsg(row.descriptions)}}
                        </ng-container>
                        <ng-container *ngIf="row.title==='JOB_STARVING'">
                            {{row.descriptions[0]|translate}}
                        </ng-container>
                        <ng-container *ngIf="row.title!=='SYSTEM_VALIDATION_FAILED' && row.title!=='JOB_STARVING'">
                            {{row.descriptions && row.descriptions.join(',')}}
                        </ng-container>
                    </td>
                </ng-container>
                <ng-container matColumnDef="traceId">
                    <th mat-header-cell *matHeaderCellDef> {{columnList['traceId']|translate}} </th>
                    <td mat-cell *matCellDef="let row">
                        {{row.traceId|translate}}
                    </td>
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="tableSource.displayedColumns(); sticky: true"></tr>
                <tr mat-row *matRowDef="let row; columns: tableSource.displayedColumns();"></tr>
            </table>
        </div>
        <mat-paginator [showFirstLastButtons]="true" [length]="tableSource.totoalItemCount"
            [pageIndex]="tableSource.pageNum" [pageSize]="tableSource.pageSize"
            (page)="tableSource.loadPage($event.pageIndex)">
        </mat-paginator>
    </div>
</div>